var imgs=['img/c1.jpg','img/c2.jpg','img/c3.jpg','img/c4.jpg'];
// 设置显示第一张
var img=document.getElementById("lbimg");
img.setAttribute('src',imgs[0]);


var ul=document.getElementById('lunbo-ul');
var mywidth=imgs.length*8+(imgs.length+1)*10;
ul.style.width=mywidth+'px';
ul.style.marginLeft=-mywidth+'px';
for (var i = 0; i < imgs.length; i++) {
	ul.innerHTML+='<li></li>';
}
var i=0
function change(){
	for (var j = 1; j <=imgs.length; j++) {
		ul.childNodes[j].style.backgroundColor='#C0C0C0';
		ul.childNodes[j].style.width='0.5rem';
		ul.childNodes[j].style.height='0.5rem';
		ul.childNodes[j].style.marginTop='0rem';
	}
	
	if(i>=3){
		i=0;
	}else{
		i++;
	}
	// console.log(i)
	img.setAttribute('src',imgs[i]);
	ul.childNodes[i+1].style.backgroundColor='#C72B52';
	ul.childNodes[i+1].style.width='1rem';
	ul.childNodes[i+1].style.height='1rem';
	ul.childNodes[i+1].style.marginTop='-0.2rem'
}
var timer=null;
timer=setInterval('change()',2000);
for (var i = 0; i < imgs.length; i++) {
	ul.childNodes[i+1].index=i;
	ul.childNodes[i+1].onmousemove=function(){
		img.setAttribute('src',imgs[this.index])
		clearInterval(timer);
		timer=null;
		for (var j = 1; j <=imgs.length; j++) {
			ul.childNodes[j].style.backgroundColor='#C0C0C0';
			ul.childNodes[j].style.width='0.5rem';
			ul.childNodes[j].style.height='0.5rem';
			ul.childNodes[j].style.marginTop='0rem';
		}
		ul.childNodes[this.index+1].style.backgroundColor='#C72B52';
		ul.childNodes[this.index+1].style.width='1rem';
		ul.childNodes[this.index+1].style.height='1rem';
		ul.childNodes[this.index+1].style.marginTop='-0.2rem'
	}
	ul.childNodes[i+1].onmouseout=function(){
		timer=setInterval('change()',2000);
	}
}
img.onmousemove=function(){
	clearInterval(timer);
	timer=null;
}
img.onmouseout=function(){
	timer=setInterval('change()',2000);
}